/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
// 面向组件开发
import React, { Component } from 'react';
import {
    AppRegistry,//注册
    StyleSheet,//样式
    Text,//文本组件
    View,//视图组件
    Image,//图像
    TextInput,//输入框
} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
class LoginView extends Component {
    //初始化方法 ---> ViewDidLoad ---> 返回具体的组件内容
    // 写结构和内容
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
               <Image source={require('./img/icon.png')} style={styles.iconStyle} />
                {/*账号*/}
                <TextInput  placeholder={'请输入用户名'} style={styles.textInputStyle}/>
                {/*密码*/}
                <TextInput  placeholder={'请输入密码'} password={true} style={styles.textInputStyle}/>
                {/*登录*/}
                <View style={styles.loginBtnStyle}>
                    <Text style={{color:'white'}}>登录</Text>
                </View>
                {/*设置*/}
                <View style={styles.settingStyle}>
                    <Text>无法登录</Text>
                    <Text>新用户</Text>
                </View >
                {/*其它的登录方式*/}
                <View style={styles.oterloginStyle}>
                    <Text>其它的登录方式</Text>
                    <Image source={require('./img/icon1.png')} style={styles.oterImagenStyle}/>
                    <Image source={require('./img/icon2.png')} style={styles.oterImagenStyle}/>
                    <Image source={require('./img/icon3.png')} style={styles.oterImagenStyle}/>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#dddddd',
        //设置侧轴的对齐方式
        alignItems:'center',
    },
    iconStyle:{
        marginTop:50,
        marginBottom:30,
        width:80,
        height:80,
        borderRadius:40,
        borderWidth:2,
        borderColor:'white'
    },
    textInputStyle:{
        height:38,
        width:width,
        backgroundColor:'white',
        marginBottom:1,
        textAlign:'center',
    },
    loginBtnStyle:{
        height:35,
        width:width*0.9,
        backgroundColor:'blue',
        marginTop:30,
        marginBottom:20,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:8,
    },
    settingStyle:{
        flexDirection: 'row',
       // backgroundColor: 'red',
        //主轴的对其方式
        width:width*0.9,
        justifyContent:'space-between',
    },
    oterloginStyle:{
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:10,
        left:20,
    },
    oterImagenStyle:{
        width:50,
        height:50,
        borderRadius:25,
    }
});

//输出一个类及LoginView
module.exports = LoginView;